<template>
	<div class="paper-wrap">
		<n-card>
			<!-- 学生信息 -->
			<div class="paper-title">
				<h2>密立根油滴实验</h2>
				<div class="stu-info">
					<div class="stu-info-item">
						<span>学号：</span>
						<span>{{ sid }}</span>
					</div>
					<div class="stu-info-item">
						<span>姓名：</span>
						<span>{{ name }}</span>
					</div>
					<div class="stu-info-item">
						<!-- <span>班级：</span>
						<span>{{cid}}</span> -->
					</div>
				</div>
			</div>
			<!-- 实验的基本信息 -->
			<n-divider title-placement="left"> <h2>一、实验目的</h2></n-divider>
			<div class="paper-purpose">
				<ol>
					<li> 1.掌握密立根油滴实验原理及仪器调整方法 </li>
					<li> 2.掌握带电油滴电荷量的测定，并证明电荷的量子性 </li>
				</ol>
			</div>
			<n-divider title-placement="left"> <h2>二、实验仪器</h2></n-divider>
			<div class="paper-instrument">
				<p class="instruments">密立根油滴仪、钟表油、喉头喷雾器 </p>
			</div>
			<n-divider title-placement="left"> <h2>三、实验原理</h2></n-divider>
			<div class="paper-principle">
				<p class="principles"> 具体内容请参照实验指导书进行学习 </p>
			</div>

			<n-divider title-placement="left">
				<h2>四、数据记录与处理</h2></n-divider
			>
			<div class="paper-data">
				<!-- 第一个表单 -->
				<h4 style="text-align: center">数据记录表格</h4>

				<table
					border="1"
					style="
						width: 100%;
						border-collapse: collapse;
						border: 1px solid #000;
					"
				>
					<tr style="background: rgb(0, 0, 0, 0.1)">
						<td>油滴编号</td>
						<td>U/V</td>
						<td>t/s</td>
						<td>U平均/V</td>
						<td>t平均/s</td>
						<td>q/（10^-19C）</td>
						<td>油滴半径r/(10^-6m)</td>
						<td>n</td>
						<td>e/(10^-19C)</td>
						<td>相对误差E/%</td>
					</tr>
					<!-- 编号1 -->
					<tr>
						<th rowspan="3">1</th>
						<td>
							<el-input
								type="text"
								v-model="model[0].value"
								@blur="getTime(0)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[1].value"
								@blur="getTime(1)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[2].value"
								@blur="getTime(2)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[3].value"
								@blur="getTime(3)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[4].value"
								@blur="getTime(4)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[6].value"
								@blur="getTime(6)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[7].value"
								@blur="getTime(7)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[8].value"
								@blur="getTime(8)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[9].value"
								@blur="getTime(9)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[10].value"
								@blur="getTime(10)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[11].value"
								@blur="getTime(11)"
							/> </td
						><td>
							<el-input
								type="text"
								v-model="model[12].value"
								@blur="getTime(12)"
							/>
						</td>
					</tr>
					<!--  -->
					<tr>
						<th rowspan="3">2</th>
						<td>
							<el-input
								type="text"
								v-model="model[13].value"
								@blur="getTime(13)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[14].value"
								@blur="getTime(14)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[15].value"
								@blur="getTime(15)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[16].value"
								@blur="getTime(16)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[17].value"
								@blur="getTime(17)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[18].value"
								@blur="getTime(18)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[19].value"
								@blur="getTime(19)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[20].value"
								@blur="getTime(20)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[21].value"
								@blur="getTime(21)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[22].value"
								@blur="getTime(22)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[23].value"
								@blur="getTime(23)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[24].value"
								@blur="getTime(24)"
							/> </td
						><td>
							<el-input
								type="text"
								v-model="model[25].value"
								@blur="getTime(25)"
							/>
						</td>
					</tr>
					<!--  -->
					<tr>
						<th rowspan="3">3</th>
						<td>
							<el-input
								type="text"
								v-model="model[26].value"
								@blur="getTime(26)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[27].value"
								@blur="getTime(27)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[28].value"
								@blur="getTime(28)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[29].value"
								@blur="getTime(29)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[30].value"
								@blur="getTime(30)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[31].value"
								@blur="getTime(31)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[32].value"
								@blur="getTime(32)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[33].value"
								@blur="getTime(33)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[34].value"
								@blur="getTime(34)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[35].value"
								@blur="getTime(35)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[36].value"
								@blur="getTime(36)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[37].value"
								@blur="getTime(37)"
							/> </td
						><td>
							<el-input
								type="text"
								v-model="model[38].value"
								@blur="getTime(38)"
							/>
						</td>
					</tr>
					<!--  -->
					<tr>
						<th rowspan="3">4</th>
						<td>
							<el-input
								type="text"
								v-model="model[39].value"
								@blur="getTime(39)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[40].value"
								@blur="getTime(40)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[41].value"
								@blur="getTime(41)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[42].value"
								@blur="getTime(42)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[43].value"
								@blur="getTime(43)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[44].value"
								@blur="getTime(44)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[45].value"
								@blur="getTime(45)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[46].value"
								@blur="getTime(46)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[47].value"
								@blur="getTime(47)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[48].value"
								@blur="getTime(48)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[49].value"
								@blur="getTime(49)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[50].value"
								@blur="getTime(50)"
							/> </td
						><td>
							<el-input
								type="text"
								v-model="model[51].value"
								@blur="getTime(51)"
							/>
						</td>
					</tr>
					<!--  -->
					<tr>
						<th rowspan="3">5</th>
						<td>
							<el-input
								type="text"
								v-model="model[52].value"
								@blur="getTime(52)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[53].value"
								@blur="getTime(53)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[54].value"
								@blur="getTime(54)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[55].value"
								@blur="getTime(55)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[56].value"
								@blur="getTime(56)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[57].value"
								@blur="getTime(57)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[58].value"
								@blur="getTime(58)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[59].value"
								@blur="getTime(59)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[60].value"
								@blur="getTime(60)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[61].value"
								@blur="getTime(61)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[62].value"
								@blur="getTime(62)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[63].value"
								@blur="getTime(63)"
							/> </td
						><td>
							<el-input
								type="text"
								v-model="model[64].value"
								@blur="getTime(64)"
							/>
						</td>
					</tr>
					<!--  -->
					<tr>
						<th rowspan="3">6</th>
						<td>
							<el-input
								type="text"
								v-model="model[65].value"
								@blur="getTime(65)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[66].value"
								@blur="getTime(66)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[67].value"
								@blur="getTime(67)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[68].value"
								@blur="getTime(68)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[69].value"
								@blur="getTime(69)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[70].value"
								@blur="getTime(70)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[71].value"
								@blur="getTime(71)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[72].value"
								@blur="getTime(72)"
							/>
						</td>
						<td rowspan="3">
							<el-input
								type="text"
								v-model="model[73].value"
								@blur="getTime(73)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[74].value"
								@blur="getTime(74)"
							/>
						</td>
						<td>
							<el-input
								type="text"
								v-model="model[75].value"
								@blur="getTime(75)"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<el-input
								type="text"
								v-model="model[76].value"
								@blur="getTime(76)"
							/> </td
						><td>
							<el-input
								type="text"
								v-model="model[77].value"
								@blur="getTime(77)"
							/>
						</td>
					</tr>
					<!--  -->
				</table>
				<h4
					>说明:用软件计算出实验结果，再用各个q
					去除标准电子电荷eo-1.6010-19 C，并取整数，即n =
					g/eo。然后用实验测得的电量除以这个 即得电子的电荷值e，e
					取三位有效数字</h4
				>
			</div>
			<!-- 第五个表单 -->
			<n-divider title-placement="left"><h2>五、实验分析</h2></n-divider>
			<div class="paper-analyze">
				<el-form
					:form="model"
					style="font-size: 19px"
					label-width="460px"
					label-position="left"
				>
					<el-form-item
						label="1.由实验结果可知，油滴所带的电荷量是(填“连续的”或“不连续的”)"
						style="width: 60%"
					>
						<el-input
							v-model="model[78].value"
							@blur="getTime(78)"
						></el-input>
					</el-form-item>
					<el-form-item
						label="所有油滴所带的电荷量都是基本电荷的多少倍"
						style="width: 60%"
					>
						<el-input
							v-model="model[79].value"
							@blur="getTime(79)"
						></el-input>
					</el-form-item>
				</el-form>
				<div style="margin-bottom: 10px; font-size: 17px"
					>2. 请对本实验产生误差的原因作出分析:</div
				>
				<el-input
					type="textarea"
					v-model="model[80].value"
					style="height: 100px"
					@blur="getTime(80)"
				/>
			</div>
			<div class="btn-group">
				<n-button type="info" @click="router.back()">
					保存并退出
				</n-button>
				<router-link to="/">
					<n-button type="success" @click="apply"> 提交 </n-button>
				</router-link>
			</div>
		</n-card>
	</div>
</template>
<script setup lang="ts">
// 引入路由
//@ts-nocheck
import { useRoute } from 'vue-router'
import { changeState, getDetailEx } from '@/api/request'
import { useGlobalStore } from '@/store/GlobalStore/index'
const store = useGlobalStore()
const route = useRoute()
const router = useRouter()
const name = store.userInfo.username
const rid = ref('')
const tid = ref('')
const sid = route.query.sid
const cid = store.userInfo.cid
// import router from '~/src/router'

const model = ref([
	//1
	{ kid: 'k1_1', value: '', timeStamp: '' },
	{ kid: 'k1_2', value: '', timeStamp: '' },
	{ kid: 'k1_3', value: '', timeStamp: '' },
	{ kid: 'k1_4', value: '', timeStamp: '' },
	{ kid: 'k1_5', value: '', timeStamp: '' },
	{ kid: 'k1_6', value: '', timeStamp: '' },
	{ kid: 'k1_7', value: '', timeStamp: '' },
	{ kid: 'k1_8', value: '', timeStamp: '' },
	{ kid: 'k1_9', value: '', timeStamp: '' },
	{ kid: 'k2_1', value: '', timeStamp: '' },
	{ kid: 'k2_2', value: '', timeStamp: '' },
	{ kid: 'k3_1', value: '', timeStamp: '' },
	{ kid: 'k3_2', value: '', timeStamp: '' },
	// 2
	{ kid: 'k4_1', value: '', timeStamp: '' },
	{ kid: 'k4_2', value: '', timeStamp: '' },
	{ kid: 'k4_3', value: '', timeStamp: '' },
	{ kid: 'k4_4', value: '', timeStamp: '' },
	{ kid: 'k4_5', value: '', timeStamp: '' },
	{ kid: 'k4_6', value: '', timeStamp: '' },
	{ kid: 'k4_7', value: '', timeStamp: '' },
	{ kid: 'k4_8', value: '', timeStamp: '' },
	{ kid: 'k4_9', value: '', timeStamp: '' },
	{ kid: 'k5_1', value: '', timeStamp: '' },
	{ kid: 'k5_2', value: '', timeStamp: '' },
	{ kid: 'k6_1', value: '', timeStamp: '' },
	{ kid: 'k6_2', value: '', timeStamp: '' },
	// 3
	{ kid: 'k7_1', value: '', timeStamp: '' },
	{ kid: 'k7_2', value: '', timeStamp: '' },
	{ kid: 'k7_3', value: '', timeStamp: '' },
	{ kid: 'k7_4', value: '', timeStamp: '' },
	{ kid: 'k7_5', value: '', timeStamp: '' },
	{ kid: 'k7_6', value: '', timeStamp: '' },
	{ kid: 'k7_7', value: '', timeStamp: '' },
	{ kid: 'k7_8', value: '', timeStamp: '' },
	{ kid: 'k7_9', value: '', timeStamp: '' },
	{ kid: 'k8_1', value: '', timeStamp: '' },
	{ kid: 'k8_2', value: '', timeStamp: '' },
	{ kid: 'k9_1', value: '', timeStamp: '' },
	{ kid: 'k9_2', value: '', timeStamp: '' },
	// 4
	{ kid: 'k10_1', value: '', timeStamp: '' },
	{ kid: 'k10_2', value: '', timeStamp: '' },
	{ kid: 'k10_3', value: '', timeStamp: '' },
	{ kid: 'k10_4', value: '', timeStamp: '' },
	{ kid: 'k10_5', value: '', timeStamp: '' },
	{ kid: 'k10_6', value: '', timeStamp: '' },
	{ kid: 'k10_7', value: '', timeStamp: '' },
	{ kid: 'k10_8', value: '', timeStamp: '' },
	{ kid: 'k10_9', value: '', timeStamp: '' },
	{ kid: 'k11_1', value: '', timeStamp: '' },
	{ kid: 'k11_2', value: '', timeStamp: '' },
	{ kid: 'k12_1', value: '', timeStamp: '' },
	{ kid: 'k12_2', value: '', timeStamp: '' },
	// 5
	{ kid: 'k13_1', value: '', timeStamp: '' },
	{ kid: 'k13_2', value: '', timeStamp: '' },
	{ kid: 'k13_3', value: '', timeStamp: '' },
	{ kid: 'k13_4', value: '', timeStamp: '' },
	{ kid: 'k13_5', value: '', timeStamp: '' },
	{ kid: 'k13_6', value: '', timeStamp: '' },
	{ kid: 'k13_7', value: '', timeStamp: '' },
	{ kid: 'k13_8', value: '', timeStamp: '' },
	{ kid: 'k13_9', value: '', timeStamp: '' },
	{ kid: 'k14_1', value: '', timeStamp: '' },
	{ kid: 'k14_2', value: '', timeStamp: '' },
	{ kid: 'k15_1', value: '', timeStamp: '' },
	{ kid: 'k15_2', value: '', timeStamp: '' },
	// 6
	{ kid: 'k16_1', value: '', timeStamp: '' },
	{ kid: 'k16_2', value: '', timeStamp: '' },
	{ kid: 'k16_3', value: '', timeStamp: '' },
	{ kid: 'k16_4', value: '', timeStamp: '' },
	{ kid: 'k16_5', value: '', timeStamp: '' },
	{ kid: 'k16_6', value: '', timeStamp: '' },
	{ kid: 'k16_7', value: '', timeStamp: '' },
	{ kid: 'k16_8', value: '', timeStamp: '' },
	{ kid: 'k16_9', value: '', timeStamp: '' },
	{ kid: 'k17_1', value: '', timeStamp: '' },
	{ kid: 'k17_2', value: '', timeStamp: '' },
	{ kid: 'k18_1', value: '', timeStamp: '' },
	{ kid: 'k18_2', value: '', timeStamp: '' },
	{ kid: 'k19', value: '', timeStamp: '' },
	{ kid: 'k20', value: '', timeStamp: '' },
	{ kid: 'k21', value: '', timeStamp: '' },
])
const fn = () => {
	console.log('ttttttttttest')
}
const debunce = (fn) => {
	let timer = null
	return function () {
		if (timer) {
			clearTimeout(timer)
		}
	}
	timer = setTimeout(function () {
		fn()
	}, 1000)
} //防抖
const jwtToken = localStorage.getItem('jwtToken')
//const name = localStorage.getItem('name')

const ws = new WebSocket(`ws://210.44.37.172:8082/message?id=${sid}&role=student`)
ws.onopen = function (e) {
	console.log('连接成功')
	// console.log('断开之前')
	// setTimeout(() => {
	// 	ws.close()
	// }, 3000)
	// console.log('断开了')
	// ws.send(
	// 	// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"3.2.3"}'
	// 	`{"role":"student","sourceId":"${sid}","eid":"3","rid":"${rid.value}","destId":"${tid.value}","kid":"k3","value":"3.33","timeStamp":"3.2.3"}`
	// )
}
ws.onmessage = function (e) {
	console.log(e.data, '接收返回的消息')
}
ws.onclose = function () {
	console.log('连接关闭')
}
ws.onerror = function () {
	console.log('连接出错')
}

onMounted(() => {
	console.log('组件挂载')
	rid.value = route.query.id
	tid.value = route.query.tid
	console.log('sid', sid, 'rid', rid.value, 'tid', tid.value)
	console.log(store.userInfo.username, 'store')

	// 拿到保存的实验数据
	getDetailEx(jwtToken, 1, rid.value).then((res) => {
		console.log(res.data.data[0], 'socket数据')
		model.value.forEach((element) => {
			var obj = element
			var kid = obj.kid
			if (res.data.data[0].hasOwnProperty(kid)) {
				obj.value = res.data.data[0][kid]
				obj.timeStamp = res.data.data[0]['t' + kid]
			}
		})
	})
})
// 填每一个空的时间
const fillTime = ref([])
// 失去焦点时触发事件记录时间
const getTime = function (index) {
	model.value[index].timeStamp = new Date().toLocaleString()
	// 处理model数组的数据
	model.value = model.value.map((item) => ({
		role: 'student',
		sourceId: sid,
		rid: rid.value,
		destId: tid.value,
		eid: '10',
		kid: item.kid,
		// 返回这个对象中第一个属性的value值
		value: item.value,
		timeStamp: item.timeStamp,
	}))
	console.log('输出的', model.value)
	//每次点击一个空，就会将状态更改为1，已开始
	changeState(jwtToken, rid.value, 1).then((res) => {
		console.log('已开始', res)
	})
	//	debunce(wssend)

	const wssend = ws.send(
		// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"666666666"}'
		`${JSON.stringify(model.value[index])}`
	)
	console.log(model.value[index], '填的空')
}
// 提交
const apply = function () {
	// console.log('提交')
	// storage()
	model.value = model.value.map((item) => ({
		rid: rid.value,
		tid: tid.value,
		kid: Object.keys(item)[0],
		// 返回这个对象中第一个属性的value值
		value: item[Object.keys(item)[0]],

		timeStamp: item.timeStamp,
	}))
	//点击提交，就会将状态更改为2，已完成
	changeState(jwtToken, rid.value, 2).then((res) => {
		console.log('已完成', res)
	})
	console.log(model.value, '提交成功')
	ElMessage.success('提交成功')
}
</script>

<style lang="less" scoped>
.paper-title {
	.stu-info {
		display: flex;
		align-items: center;
		.stu-info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px;
		}
	}
}
.form1 {
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px;
		.input-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.input {
				width: 100%;
			}
		}
	}
}
table {
	margin: 10px;
	tr {
		td {
			text-align: center;
			padding: 10px;
			input {
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				text-align: center;
				box-sizing: border-box;
				&:focus {
					border-radius: 5px;
					border: 1px solid #000;
				}
			}
		}
	}
}
.btn-group {
	// 右下角
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin: 10px;
	.n-button {
		margin-left: 10px;
	}
}
</style>
